<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="Access-Control-Allow-Origin" content="*" />
    <title>Document</title>
    <script src="html/vue.min.js"></script>
    <script src="html/iview.min.js"></script>
    <link rel="stylesheet" type="text/css" href="html/iview.css">
    <script src= "html/jquery.min.js"></script>
</head>
<body>
    <div id="app">
                <Row>
                <i-input type="text" v-model="formInline.user" placeholder="Username" style="width:400px"/>
                </Row>
                <Row>
                <i-input type="password" v-model="formInline.password" placeholder="Password" style="width:400px"/>
                </Row>
                <Row>
                <i-button type="primary" @click="handleSubmit()">Signin</i-button>
				</Row>
				<Row>
					<i-col span=8 v-for="(item,index) in 6">
						<div>职位{{index}}</div>
						<i-button @click="focus(index)" >关注</i-button>
						<i-button @click="send(index)">投递简历</i-button>
					</i-col>
				</Row>
				
				<Row>
					<div><i-input v-model="resume" type="textarea" :rows="4" placeholder="Enter something..." /></div>
					<i-button @click="upload()" >上传简历</i-button>
				</Row>
        
    </div>
</body>


<script>
    new Vue({
        el:"#app",
        data:{
            formInline: {
                    user: '',
                    password: '',
					time:'',
                },
            ruleInline: {
                user: [
                    { required: true, message: 'Please fill in the user name', trigger: 'blur' }
                ],
                password: [
                    { required: true, message: 'Please fill in the password.', trigger: 'blur' },
                    { type: 'string', min: 6, message: 'The password length cannot be less than 6 bits', trigger: 'blur' }
                ]
            },
			resume:""
        },
        methods: {
            handleSubmit() {
				this.formInline.time = new Date();
                $.ajax({
                    url:"http://122.51.169.54/kafka/click",
                    type:"post",
                    // contentType:"appplication/json",
                    data:JSON.stringify(this.formInline),
                    success:(data)=>{
                        console.log(data);
                    }
                })
            },
			focus(index){
				var object = new Object();
				object.userId = this.formInline.user;
				object.job = "职位"+index;
				object.time = new Date();
				$.ajax({
				    url:"http://122.51.169.54/kafka/collect",
				    type:"post",
				    // contentType:"appplication/json",
				    data:JSON.stringify(object),
				    success:(data)=>{
				        console.log(data);
				    }
				})
			},
			upload(){
				var object = new Object();
				object.userId = this.formInline.user;
				object.resume = this.resume;
				object.time = new Date();
				$.ajax({
				    url:"http://122.51.169.54/kafka/upload",
				    type:"post",
				    // contentType:"appplication/json",
				    data:JSON.stringify(object),
				    success:(data)=>{
				        console.log(data);
				    }
				})
			},
			send(index){
				var object = new Object();
				object.userId = this.formInline.user;
				object.job = "职位"+index;
				object.resume = this.resume;
				object.time = new Date();
				$.ajax({
				    url:"http://122.51.169.54/kafka/send",
				    type:"post",
				    // contentType:"appplication/json",
				    data:JSON.stringify(object),
				    success:(data)=>{
				        console.log(data);
				    }
				})
			}
        }
    })
</script>
</html>